 {{ .StocksModuleNav }}

 <!--涨跌幅榜-->
 <div id="stock_hot" class="card text-center">
    <div class="card-header">
      <ul id="tabs_hot" class="nav nav-pills card-header-pills">
        <li class="nav-item">
          <a class="nav-link active" href="javascript:void(0);" tab="sha_desc">沪A(涨)</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0);" tab="sha_asc">沪A(跌)</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0);" tab="sza_desc">深A(涨)</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0);" tab="sza_asc">深A(跌)</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0);" tab="cyb_desc">创业(涨)</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0);" tab="cyb_asc">创业(跌)</a>
        </li>
      </ul>
    </div>
    <div id="tabs_hot_body" class="card-body m-0 p-0 bg-light">
        <div id="tabs_hot_loading" class="spinner-border text-success" style="display: none;" role="status">
          <span class="sr-only"></span>
        </div>
    </div>
</div>


<script type="text/javascript">
 
  $(function () {
      $("#tabs_hot").find("a").on("click", function (obj) {
          $("#tabs_hot").find("a").removeClass("active");
          $(this).addClass("active");
          var tabid = $(this).attr("tab")
          var tab = $("#tabs_hot_body").find("table").hide();
          var len = $("#"+tabid) && $("#"+tabid).length;
          if(len > 0){
              $("#tabs_hot_loading").fadeOut(500, function () {
                  $("#"+tabid).fadeIn(1000);
              });
          }else{
              var loading_div = $("#tabs_hot_loading").show();
              $.post("/stocks/hot_today",{tabid:tabid, size:100},function(json) {
                  loading_div.hide();
                  if(!json.flag){
                      alert("加载失败");
                  }else{
                      var arr = json.data.data.list;
                      var html = "";

                      html += '<table id="'+ tabid +'" class="table m-0 p-0">';
                      html += '<thead>';

                      var cols = ["#", "股票", "价格", "涨幅", "市值","成交额", "量比", "分析"];
                      
                      html += '<tr class="text-muted">';
                      for(var i=0; i<cols.length; i++){
                         html += '<th scope="col" class="border-bottom">'+ cols[i] +'</th>';
                      }
                      html += '</tr>';

                      html += '</thead>';
                      html += '<tbody>';
                    
                      var colorcss = tabid.indexOf('desc') > -1 ? 'text-danger' : 'text-success';

                      for(var i=0;i<arr.length;i++){
                          var row = arr[i];
                          var tr = '<tr class="'+ colorcss +'">';
                          tr += '<th scope="row">'+ (i+1) +'</th>';
                          tr += '<td><a target="_blank" class="'+ colorcss +'" href="https://xueqiu.com/S/'+ row.symbol +'">';
                          tr += '<u>'+ row.name +'<br/>'+ row.symbol +'</u></a></td>';
                          tr += '<td>'+ row.current +'</td>';
                          tr += '<td>'+ row.percent +'%</td>';
                          tr += '<td>'+ (row.market_capital/ 100000000).toFixed(2) + '亿</td>';
                          tr += '<td>'+ (row.amount / 100000000).toFixed(2) + '亿</td>'
                          tr += '<td>'+ (row.volume_ratio ? row.volume_ratio : '/') +'</td>';
                          tr += '<td><a target="_blank" class="'+ colorcss +'" href="/stocks/weigh/'+ row.symbol.replace(/\D/gi,'') +'">分析</a></td>';
                          tr += '</tr>';
                          html += tr;
                      }

                      html += '</tbody>';
                      html += '</table>';

                      $("#tabs_hot_body").append(html);
                  }
              });
          }
      });

      $("#tabs_hot").find("a.active").click();
  });
</script>

